<!-- 点击编辑弹出的dialog -->
<template>
    <el-dialog
            :visible.sync="visible"
            :modal-append-to-body='false'
            :close-on-click-modal='false'
            @close="close"
           >
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="企业aid" prop="aid" v-show="false">
                    <el-input type="hidden" v-model="ruleForm.aid" v-show="false"></el-input>
                </el-form-item>
                <el-form-item label="企业名称" prop="name">
                    <el-input prefix-icon="el-icon-s-custom" v-model="ruleForm.name" placeholder="请输入企业名称" clearable></el-input>
                </el-form-item>
                <el-form-item label="企业账号" prop="account">
                    <el-input prefix-icon="el-icon-user" v-model="ruleForm.account" placeholder="请输入企业账号" clearable></el-input>
                </el-form-item>
                <el-form-item label="联系人" prop="leader">
                    <el-input prefix-icon="el-icon-user" v-model="ruleForm.leader" placeholder="请输入企业联系人" clearable></el-input>
                </el-form-item>
                <el-form-item label="联系电话" prop="phone">
                    <el-input prefix-icon="el-icon-phone" v-model="ruleForm.phone" placeholder="请输入联系电话" clearable></el-input>
                </el-form-item>
                <el-form-item label="企业邮箱" prop="email">
                    <el-input prefix-icon="el-icon-message" v-model="ruleForm.email" placeholder="请输入企业邮箱" clearable></el-input>
                </el-form-item>
                <el-form-item label="联系地址" prop="address">
                    <el-input prefix-icon="el-icon-map-location" v-model="ruleForm.address" placeholder="请输入地址" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
    </el-dialog>
</template>

<script>
import { checkEnterAccountExist, 
         checkEnterprisePhoneExist,
         addOrEditEnterprise,
} from '../../../api/enterpriseManage/index'
export default {
    data () {
        var checkAccount = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('账号不能为空'))
            }
            // 判断企业账号是否存在相同
            const params = {
                aid: this.ruleForm.aid ? this.ruleForm.aid : -1,
                account: this.ruleForm.account,
            }
            checkEnterAccountExist(params).then(res=>{
                if(res.data.data.isExist === true){
                    callback(new Error('该账号已存在，请重新输入！'));
                }else{
                    callback();
                }
            });
        }
        var checkEmail = (rule, value, callback) => {
            const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
            if (!value) {
            return callback(new Error('邮箱不能为空'))
            }
            setTimeout(() => {
                if (mailReg.test(value)) {
                    callback()
                } else {
                    callback(new Error('请输入正确的邮箱格式'))
                }   
            }, 100)
        }
        var checkPhone = (rule, value, callback) => {
            const phoneReg = /^1[3|4|5|7|8][0-9]{9}$/
            if (!value) {
                return callback(new Error('电话号码不能为空'))
            }
            setTimeout(() => {
                if (!Number.isInteger(+value)) {
                    callback(new Error('请输入数字'))
                } else {
                    if (phoneReg.test(value)) {
                        const params = {
                            aid: this.ruleForm.aid ? this.ruleForm.aid : -1,
                            phone: this.ruleForm.phone,
                        }
                        checkEnterprisePhoneExist(params).then(res=>{
                            if(res.data.data.isExist === true){
                                callback(new Error('该手机号已存在，请重新输入！'));
                            }else{
                                callback();
                            }
                        });
                    } else {
                    callback(new Error('电话号码格式不正确'))
                    }
                }
            }, 100)
        }
        return {
            visible: this.show,
            ruleForm: {
                aid: '',
                name: '',
                account: '',
                phone: '',
                email: '',
                address: '',
                leader: '',
            },
            rules: {
                name: [
                    { required: true, message: '请输入企业名称', trigger: 'blur' }
                ],
                account: [
                    { validator: checkAccount, trigger: 'blur' }    
                ],
                 phone: [
                    { validator: checkPhone, trigger: 'blur' }
                ],
                 email: [
                    { validator: checkEmail, trigger: 'blur' }
                ],
                 address: [
                    { required: true, message: '请输入地址', trigger: 'blur' }
                ],
                leader: [
                    { required: true, message: '请输入联系人', trigger: 'blur' }
                ],
            }
        };
    },
    props: {
        show: {
            type: Boolean,
            default: false
        },
        detailRow: {
            type: Object,
            require: true,
        }
    },
    watch: {
        show () {
            this.visible = this.show;
        },
        detailRow() {
            this.ruleForm = this.detailRow;
        },

    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {

            const params = {
                aid: this.ruleForm.aid ? this.ruleForm.aid : -1,
                account: this.ruleForm.account,
                address: this.ruleForm.address,
                email: this.ruleForm.email,
                phone: this.ruleForm.phone,
                name: this.ruleForm.name,
                leader: this.ruleForm.leader,
            }

            // 添加或者编辑企业
            addOrEditEnterprise(params).then(res=>{
                this.$message({
                    message: res.data.message,
                    type: 'success',
                })
                setTimeout(() => {
                    this.visible = false;
                }, 800);
            })
           
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.ruleForm.name = '';
        this.ruleForm.account = '',
        this.ruleForm.phone = '';
        this.ruleForm.email = '';
        this.ruleForm.address = '';
        this.ruleForm.leader = '';
      },
      close(){
        //   $emit('update:show', false);
          this.$router.go(0);
      }
    },
}
</script>

<style scoped>

</style>
